06 Fetch 结合 filter 实现快速匹配古诗

在输入框中输入一个词，迅速匹配，展示含有这个词的诗句，诗句的来源 json 数据是加载页面时从网络中异步获得。在线效果请查看。

初始文档中提供了 HTML 和 CSS，我们需要补全 JS 代码。这个挑战是 Ajax 的预热练习，在异步方面用到了一些目前还未被完全支持的新特性，但很好用。

原文档中选的内容是英文城市名，我将其换成了唐诗，构造了一个含有 70 多首唐诗的 JSON 数据，访问地址是 ，请自由取用。

• Promise
  • json()
• Array
  • filter()
  • map()
  • push()
  • join()
  • Spread syntax 扩展语句
• RegExp
  • match()
  • replace()

1. 声明一个空数组，用于存放解析 json 后的数据
2. 获取两个主要 HTML 元素（<input>，<ul>），给 <input> 添加事件监听（change, keyup）
3. 编写匹配输入的函数
   1. 运用 filter() 过滤数组数据
   2. 创建正则表达式，构造过滤条件
4. 编写展示匹配结果的函数
   1. 获取匹配数据
   2. 替换关键词放入高亮的标签
   3. 构造 HTML 标签数据

Fetch API 这个新特性，是 XMLHttpRequest 获取资源新的替代方案，目前还是一个实验中的功能，截至到 2017.01.01 在 MDN 显示的支持情况是：Chrome 42.0、Firefox (Gecko) 39、Opera 29、Chrome for Android 42.0、Android Webview。如何使用可以看这篇文章。

fetch()

语法如下：

MDN 中有个如下：

用 ES6 的语法来写就是这样：

这个示例中使用了 blob() 方法来获取图片的内容，这是 Body 类定义的一个方法，除此之外还有可以获取其他内容的方法，可以在这里看，也可以在 Console 面板中查看：

利用扩展运算符可以，两种语法的写法如下：

这一部分用到的语句很简单，但都用了 ES6 的语法，所以不熟悉 ES6 的话需要时间适应一下。

如果把每条语句分解开来运行，得到的返回结果可以看下面的截图。

获取到了数据之后，如何匹配输入值呢？就要利用正则表达式了。正则表达式的 match() 可以执行一个匹配操作，我们再结合 便能筛出整个数组中，满足条件的项，再经过字符串处理即可输出到页面。

创建时间：2016-12-31
最后更新：2017-01-03